<!--
    group: 账单管理
    name: 分润结算
    url: /billManagement/settlementSheet
-->
<template>
  <div class="main_content">
    <div class="header_invioce">
      <h3>分润结算</h3>
    </div>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="margin-bottom: 10px">
      <a-form layout="inline">
        <a-row :gutter="24" style="margin-top: 10px">
          <a-col v-bind="colFlexConfig">
            <a-form-item label="渠道名称">
              <a-input placeholder="请输入" v-model="filterList.entName" />
            </a-form-item>
          </a-col>
          <a-col v-bind="colFlexConfig">
            <a-form-item label="结算周期">
              <a-range-picker
                v-model="filterList.time" @change="onChange"
                format="YYYY-MM" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="10">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 10px" icon="reload" @click="handleReset">重置</a-button>
                <!--                <a @click="handleToggleSearch" style="margin-left: 8px">-->
                <!--                    {{ toggleSearchStatus ? '收起' : '展开' }}-->
                <!--                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
                <!--                </a>-->
              </span>
          </a-col>
        </a-row>
        <div class="table-page-search-wrapper" v-show="toggleSearchStatus">
          <a-row :gutter="24">
          </a-row>
        </div>
      </a-form>
    </div>

    <a-table bordered
             :loading="loading"
             :pagination="false"
             :columns="columns"
             :data-source="tableData"
             :scroll="{x:800}"
    >
      <!-- 结算周期 -->
      <span slot="settleAccountsCycle" slot-scope="text,record">
        {{getMonthDays(text)}}
      </span>

      <!--结算状态:10-待发布;20-待审核;25-审核不通过;30-待确认;40-待结算;50-已完成-->
      <span slot="repayStatus" slot-scope="text,record">
        {{ {10:'待发布',20:'审核中',25:'审核不通过',30:'待确认',40:'待结算',50:'已完成'}[text] }}
      </span>

      <!--操作-->
      <span slot="action" slot-scope="text,record">
        <a @click="toDetails(record)">结算明细</a>
      </span>

    </a-table>
    <a-pagination
      v-model="page.currentPage"
      :page-size-options="['5', '10', '20']"
      :show-total="total => `共 ${total} 条`"
      :total="page.totalCount"
      show-size-changer
      :page-size="page.pageSize"
      @showSizeChange="onSizeChange"
      @change="onPageChange"
    >
    </a-pagination>

  </div>
</template>

<script>
import { dividendInfoList } from '@/api/billManagement'
import { conversionDate, conversionElement } from '@/utils/util'
// :md="6" :lg="6" :xl="7" :xxl="4"
const colFlexConfig = {
   md: 8, lg: 8,xl: 8, xxl: 6,
}
export default {
  name: "settlementSheet",
  data(){
    return{
      colFlexConfig,
      toggleSearchStatus: false,
      filterList: {
        time: [],
      },
      loading: false,  //表格加载
      //表格分页
      page: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 查询参数对象
        list: [], // 数据
      },
      tableData: [],
      columns: [
        {
          title: '结算周期',
          dataIndex: 'settleAccountsCycle',
          scopedSlots: { customRender: 'settleAccountsCycle' },
          ellipsis: true,
          width: 200,
          align: 'center'
        },
        {
          title: '开票企业数',
          dataIndex: 'entNum',
          ellipsis: true,
          width: 150,
          align: 'center'
        },
        {
          title: '开票金额',
          dataIndex: 'taxMoney',
          customRender: (text, record) => {
            return Math.round(text * 100) / 10000 + '元'
          },
          width: 120,
          align: 'center'
        },
        {
          title: '增值税额',
          dataIndex: 'vatMoney',
          customRender: (text, record) => {
            return Math.round(text * 100) / 10000 + '元'
          },
          width: 120,
          align: 'center'
        },
        {
          title: '个税额',
          dataIndex: 'personalMoney',
          customRender: (text, record) => {
            return Math.round(text * 100) / 10000 + '元'
          },
          width: 120,
          align: 'center'
        },
        {
          title: '返还金额',
          dataIndex: 'repayVat',
          customRender: (text, record) => {
            return Math.round(text * 100) / 10000 + '元'
          },
          width: 100,
          align: 'center'
        },
        {
          title: '结算状态',
          dataIndex: 'repayStatus',
          scopedSlots: { customRender: 'repayStatus' },
          width: 120,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          fixed:'right',
          width: 240
        },
      ],
    }
  },
  mounted() {
    this.getTableData();
  },
  methods:{
    //查询展开收起
    handleToggleSearch(){
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    //查询
    handleSearch(){
      this.page.currentPage = 1;
      this.getTableData();
    },
    //重置
    handleReset(){
      this.page.currentPage = 1;
      this.filterList = {};//清空查询条件
      this.getTableData();//重置列表
    },
    //时间选择
    onChange(date,dateString) {
      this.filterList.startSettleAccountsCycle = dateString[0];
      this.filterList.endSettleAccountsCycle = dateString[1];
    },
    //选择页数
    onPageChange(newPage) {
      this.page.currentPage = newPage;
      this.getTableData()
    },
    // 页面变化
    onSizeChange(current, newSize) {
      this.page.pageSize = newSize;
      this.getTableData()
    },
    //详情
    toDetails(record){
      let data = record.channelId + '_' + record.settleAccountsCycle;
      this.$router.push({
        path: '/billManagement/settlementDetails',
        query:{
          bizId: data
        }
      })
    },
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {};
      params.data = this.filterList;
      params.data.authFlag = 0;   //是否要求角色0-不要求,1-待审核 2 我审核的

      params.pageNo = this.page.currentPage;
      params.pageSize = this.page.pageSize;

      dividendInfoList(params).then(res => {
        if (res.success) {
          const data = res.result || {};
          // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.page.totalCount = data.total || 0;
          this.loading = false;

        } else {
          this.$message.warning(res.message);
        }
      })
    },
    //日期转换
    getMonthDays(date) {
      return conversionDate(date)
    }
  }
}
</script>

<style scoped lang="less">
.main_content{
  color: @color-smudge;
}

h3,h4{
  font-weight: bolder;
}
h3{
  font-size: 20px;
}
h4{
  font-size: 18px;
  margin-bottom: 20px;
}

.header_invioce{
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
